<template>
    <div class="analysis">
      <a-row style="margin-top: 0" :gutter="[24, 24]">
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日退货" total="8">
            <a-tooltip title="数据来源：不合格品处理" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日让步接收" total="9">
            <a-tooltip title="安全库存、有效期、呆滞" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日紧急放行" total="6">
            <a-tooltip title="未完成的入库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日免检" total="4">
            <a-tooltip title="未完成的出库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日报废" total="4">
            <a-tooltip title="未完成的出库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日返工" total="4">
            <a-tooltip title="未完成的出库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日返修" total="4">
            <a-tooltip title="未完成的出库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="3">
          <chart-card :loading="loading" title="今日合格率" total="80%">
            <a-tooltip title="未完成的出库通知单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </chart-card>
        </a-col>
      </a-row>
      <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{ padding: '24px' }">
        <div class="salesCard">
          <a-tabs default-active-key="关键物料A" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
            <div class="extra-wrap" slot="tabBarExtraContent">
              <div class="extra-item">
                <a>日</a>
                <a>周</a>
                <a>月</a>
                <a>年</a>
              </div>
              <a-range-picker :style="{ width: '256px' }"></a-range-picker>
            </div>
            <a-tab-pane loading="true" tab="关键物料A" key="关键物料A">
              <bar />
            </a-tab-pane>
            <a-tab-pane tab="关键物料B" key="关键物料B">
              <bar />
            </a-tab-pane>
            <a-tab-pane tab="关键物料BC" key="关键物料BC">
              <bar />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </div>
  </template>
  
  <script>
  import ChartCard from '@/components/card/ChartCard'
  import Bar from '@/components/chart/Bar'
  
  export default {
    data() {
      return {
        loading: true
      }
    },
    created() {
      setTimeout(() => this.loading = !this.loading, 1000)
    },
    components: { Bar, ChartCard }
  }
  </script>
  
  <style lang="less" scoped>
  .extra-wrap {
    .extra-item {
      display: inline-block;
      margin-right: 24px;
  
      a:not(:first-child) {
        margin-left: 24px;
      }
    }
  }
  
  @media screen and (max-width: 992px) {
    .extra-wrap .extra-item {
      display: none;
    }
  }
  
  @media screen and (max-width: 576px) {
    .extra-wrap {
      display: none;
    }
  }
  </style>
  